<!DOCTYPE html>
<html>

	<head>
		<!-- 页面meta -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">

		<title>数据后台管理-订单管理</title>

		<!-- Tell the browser to be responsive to screen width -->
		<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

		<!-- 页面meta /-->

		<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../plugins/ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="../plugins/iCheck/square/blue.css">
		<link rel="stylesheet" href="../plugins/morris/morris.css">
		<link rel="stylesheet" href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
		<link rel="stylesheet" href="../plugins/datepicker/datepicker3.css">
		<link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css">
		<link rel="stylesheet" href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
		<link rel="stylesheet" href="../plugins/datatables/dataTables.bootstrap.css">
		<link rel="stylesheet" href="../plugins/treeTable/jquery.treetable.css">
		<link rel="stylesheet" href="../plugins/treeTable/jquery.treetable.theme.default.css">
		<link rel="stylesheet" href="../plugins/select2/select2.css">
		<link rel="stylesheet" href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
		<link rel="stylesheet" href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
		<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
		<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
		<link rel="stylesheet" href="../css/style.css">
		<link rel="stylesheet" href="../plugins/ionslider/ion.rangeSlider.css">
		<link rel="stylesheet" href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
		<link rel="stylesheet" href="../plugins/bootstrap-slider/slider.css">
		<link rel="stylesheet" href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
	</head>

	<body class="hold-transition skin-purple sidebar-mini">

		<div id="app">
			<div class="wrapper">

				<!-- 页面头部 -->
				<div id="header"></div>
				<!-- 页面头部 /-->

				<!-- 导航侧栏 -->
				<div id="sidebar"></div>
				<!-- 导航侧栏 /-->

				<!-- 内容区域 -->
				<div class="content-wrapper">
					<!-- 内容头部 -->
					<section class="content-header">
						<h1>
							订单管理
							<small>订单列表</small>
						</h1>
						<ol class="breadcrumb">
							<li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
							<li><a href="#">订单管理</a></li>
							<li class="active">订单列表</li>
						</ol>
					</section>
					<!-- 内容头部 /-->
					<!-- 正文区域 -->
					<section class="content">

						<!-- .box-body -->
						<div class="box box-primary">

							<div class="box-body">

								<!-- 数据表格 -->
								<div class="table-box">

									<!--工具栏-->
									<div class="pull-left">
										<div class="form-group form-inline">
											<div class="btn-group">
												<button type="button" class="btn btn-default" title="新建"><i
														class="fa fa-file-o"></i> 新建</button>
												<button type="button" class="btn btn-default" title="删除"><i
														class="fa fa-trash-o"></i> 删除</button>
												<button type="button" class="btn btn-default" title="开启"><i
														class="fa fa-check"></i> 开启</button>
												<button type="button" class="btn btn-default" title="屏蔽"><i
														class="fa fa-ban"></i> 屏蔽</button>
												<button type="button" class="btn btn-default" title="刷新"><i
														class="fa fa-refresh"></i> 刷新</button>
											</div>
										</div>
									</div>
									<div class="box-tools pull-right">
										<div class="has-feedback">
											<input type="text" class="form-control input-sm" placeholder="搜索">
											<span class="glyphicon glyphicon-search form-control-feedback"></span>
										</div>
									</div>
									<!--工具栏/-->

									<!--数据列表-->
									<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
										<thead>
										<tr>
											<th class="" style="padding-right:0px;">
												<input id="selall" type="checkbox" class="icheckbox_square-blue">
											</th>
											<th class="sorting_asc">ID</th>
											<th class="sorting">订单编号</th>
											<th class="sorting">产品名称</th>
											<th class="sorting">金额</th>
											<th class="sorting">下单时间</th>
											<th class="sorting">订单状态</th>
											<th class="text-center">操作</th>
										</tr>
										</thead>
										<tbody>

										<tr v-for="order in pageInfo.list">
											<td><input name="ids" type="checkbox" :value="order.id" v-model="delBox"></td>
											<td>{{order.id}}</td>
											<td>{{order.orderNum}}</td>
											<td>{{order.product.productName}}</td>
											<td>{{order.product.productPrice}}</td>
											<td>{{order.orderTimeStr}}</td>
											<td>{{order.orderStatusStr}}</td>
											<td class="text-center">
												<button type="button" class="btn bg-olive btn-xs" @click="detail(order.id)">详情</button>
												<button type="button" class="btn bg-olive btn-xs">删除</button>
											</td>
										</tr>


										</tbody>

									</table>
									<!--数据列表/-->

								</div>
								<!-- 数据表格 /-->


							</div>
							<!-- /.box-body -->

							<!-- .box-footer-->
							<div class="box-footer">
								<div class="pull-left">
									<div class="form-group form-inline">
										总共{{pageInfo.pages}}页，共{{pageInfo.total}}条数据。 每页
										<select class="form-control" v-model="pageInfo.pageSize" @change="loadList(pageInfo.pageNum,pageInfo.pageSize)">
											<option>1</option>
											<option>2</option>
											<option>3</option>
											<option>4</option>
											<option>5</option>
										</select> 条
									</div>
								</div>

								<div class="box-tools pull-right">
									<ul class="pagination">
										<li>
											<a href="#" aria-label="Previous" @click="loadList(pageInfo.navigateFirstPage,pageInfo.pageSize)">首页</a>
										</li>
										<li><a href="#" @click="loadList(pageInfo.prePage,pageInfo.pageSize)" :class="{disable:pageInfo.isFirstPage}">上一页</a></li>
										<li v-for="i in pageInfo.navigatepageNums" :class="{active:i==pageInfo.pageNum}"><a href="#" @click="loadList(i,pageInfo.pageSize)">{{i}}</a></li>

										<li><a href="#" @click="loadList(pageInfo.nextPage,pageInfo.pageSize)">下一页</a></li>
										<li>
											<a href="#" aria-label="Next" @click="loadList(pageInfo.navigateLastPage,pageInfo.pageSize)">尾页</a>
										</li>
									</ul>
								</div>

							</div>
							<!-- /.box-footer-->

						</div>

					</section>
					<!-- 正文区域 /-->
				</div>
				<!-- 内容区域 /-->

				<!-- 底部导航 -->
				<div id="footer"></div>
				<!-- 底部导航 /-->

			</div>
		</div>


		<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
		<script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
		<script src="../js/include.js"></script>
		<script src="../js/config.js"></script>
		<script>
			$.widget.bridge('uibutton', $.ui.button);
		</script>
		<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="../plugins/raphael/raphael-min.js"></script>
		<script src="../plugins/morris/morris.min.js"></script>
		<script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
		<script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
		<script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
		<script src="../plugins/knob/jquery.knob.js"></script>
		<script src="../plugins/daterangepicker/moment.min.js"></script>
		<script src="../plugins/daterangepicker/daterangepicker.js"></script>
		<script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
		<script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
		<script src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
		<script src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
		<script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
		<script src="../plugins/fastclick/fastclick.js"></script>
		<script src="../plugins/iCheck/icheck.min.js"></script>
		<script src="../plugins/adminLTE/js/app.min.js"></script>
		<script src="../plugins/treeTable/jquery.treetable.js"></script>
		<script src="../plugins/select2/select2.full.min.js"></script>
		<script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
		<script src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
		<script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
		<script src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
		<script src="../plugins/bootstrap-markdown/js/markdown.js"></script>
		<script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
		<script src="../plugins/ckeditor/ckeditor.js"></script>
		<script src="../plugins/input-mask/jquery.inputmask.js"></script>
		<script src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
		<script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
		<script src="../plugins/datatables/jquery.dataTables.min.js"></script>
		<script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
		<script src="../plugins/chartjs/Chart.min.js"></script>
		<script src="../plugins/flot/jquery.flot.min.js"></script>
		<script src="../plugins/flot/jquery.flot.resize.min.js"></script>
		<script src="../plugins/flot/jquery.flot.pie.min.js"></script>
		<script src="../plugins/flot/jquery.flot.categories.min.js"></script>
		<script src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
		<script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
		<script src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
		<script src="../plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>

		<script>
			$(document).ready(function() {
				// 选择框
				$(".select2").select2();

				// WYSIHTML5编辑器
				$(".textarea").wysihtml5({
					locale: 'zh-CN'
				});

				// 全选操作 
				$("#selall").click(function() {

					var checked = $("#selall").prop('checked')
					app.delBox=[]
					if (checked){
						var allChecked = $("input[name=ids]")
						for (let i = 0; i < allChecked.length; i++) {
							var box = $(allChecked[i])
							app.delBox.push(box.val())
						}
					}
				});
			});


			// 设置激活菜单
			function setSidebarActive(tagUri) {
				var liObj = $("#" + tagUri);
				if (liObj.length > 0) {
					liObj.parent().parent().addClass("active");
					liObj.addClass("active");
				}
			}


			$(document).ready(function() {
				// 激活导航位置
				setSidebarActive("order-manager");
			});
		</script>
	</body>
<script>
	const app = new Vue({
		el:"#app",
		data:{
			pageInfo:{},
			delBox:[]
		},
		methods:{
			loadList(pageNum,pageSize){
				if (pageNum!==0){
					axios.get(getServerUrl("order/find"),{params:{
							pageNum:pageNum,
							pageSize:pageSize
						}}).then(function (pageInfo) {
						app.pageInfo = pageInfo.data;
						app.delBox=[];
						$("#selall").prop("checked",false)
					})
				}
			},
			detail(id){
				location.href="order-detail.html?id="+id;
			}
		},
		created(){
			this.loadList(1,5)
		}
	})

</script>
</html>
<!---->
